<template>
    <div id="app">
        <Header v-if="isShowHeader"></Header>
        <uni-app v-if="!($route.path==='/login' || $route.path==='/canvas')"></uni-app>
        <div :class="($route.path!='/login')?'content':'content1'" :style="style">
            <keep-alive v-if="$route.path!=='/login' && $route.path!=='/canvas'">
                <router-view />
            </keep-alive>
            <!-- 登录界面不缓存 -->
            <router-view v-else></router-view>
        </div>
        <Footer v-if="isShowFooter"></Footer>
    </div>
</template>
<script>
import Header from '@/components/header'
import Footer from '@/components/footer'
import uniApp from '@/components/uni-app'
export default {
    components: {
        Header, Footer,
        [uniApp.name]:uniApp
    },

    data() {
        return {
            isShowHeader:true,
        }
    },
    computed: {
        isShowFooter() {
            const $route = this.$route;
            return $route.path == '/my' || $route.path == '/home'
        },

        style() {
            const $route = this.$route;
            if($route.path=='/login' && !this.isShowHeader) {
                return 'height:calc(100%);'
            }else if(!this.isShowHeader) {
                return 'height:calc(100% - 50px);'
            }else {
                return ''
            }

        }
      
    },
    created() {
       
    },

    mounted() {
        this.$nextTick(() => {
            this.isShowHeader = this.isShowHeaderFn();

            this.$store.commit('setIsShowHeader',this.isShowHeader);
        })
    },

    methods:{
        // 第一次进来判断是否显示头部 执行一次
        isShowHeaderFn() {
            const { href } = window.location;
            const query = href.split('?')[1];
            if(!query) return true
            const arr = query.split('&');
            let obj = {}
            arr.forEach((item) => {
                let key = item.split('=')[0];
                let val = item.split('=')[1];
                 obj = {
                    [key]:val
                }
            })
            if(obj['isShowHeader']) {
                return false
            }else {
                return true
            }

        }
    }
}
</script>
<style lang="less">
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
#app {
    width: 100%;
    height: 100%;
}
* {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.content {
    height: calc(100% - 100px);
}
.content1 {
    height: calc(100% - 50px);
}
</style>
